import React from 'react';
import { Tooltip } from 'antd';
import { history } from 'umi'
import styles from './ScaleBar.less';

const ScaleBar = ({ scaleData }) => (
    <div className={styles.barContainer}>
        {scaleData.map(item => {
            if (item.hide) {
                return null;
            }
            return (
                <Tooltip key={item.text} title={item.tip}>
                    <div
                        className={styles.barItem}
                        style={item.style}
                        onClick={() => {
                            if (item.link) {
                                history.push(item.link);
                            }
                        }}
                    >
                        {item.text}
                    </div>
                </Tooltip>
            );
        })}
    </div>
);

export default ScaleBar;
